import React from 'react';
import { Chart, Line, Point, Tooltip, Legend } from 'bizcharts';

type PropField = {
  datas: Record<string, any>[];
  xCol: string;
  yCol: string;
  zCol?: string;
  height: number;
};
const LineChart: React.FC<PropField> = (props) => {
  const { datas, xCol, yCol, zCol, height } = props;
  if (!datas) {
    return <div />;
  }
  const position = `${xCol}*${yCol}`;
  let minVal = 6000000;
  for (let i = 0; i < datas.length; i++) {
    if (datas[i][yCol] && datas[i][yCol] < minVal) {
      minVal = datas[i][yCol];
    }
  }
  if (minVal > 0) {
    minVal = minVal - minVal * 0.01;
  }
  const scale = {
    [yCol]: {
      tickCount: 4,
      alias: '时点',
      type: 'linear-strict',
    },
  };
  return (
    <Chart scale={scale} autoFit height={height} data={datas} interactions={['element-active']}>
      <Point position={position} color={zCol} shape="circle" />
      <Line shape="smooth" position={position} color={zCol} />
      <Tooltip shared />
      <Legend
        background={{
          padding: [5, 100, 5, 36],
          style: {
            fill: '#eaeaea',
            stroke: '#fff',
          },
        }}
      />
    </Chart>
  );
};
export default LineChart;
